<template>
	<echart class="echarts" :option="option"></echart>
</template>
<script>
	import echart from '@/components/echart.vue'
	export default {
		name: '',
		components: { echart },
		props: {
			options: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				option: {}
			}
		},
		watch: {
			options() {
				this.init()
			}
		},
		methods: {
			init() {
				if (this.options) {
					this.option = this.options
					return
				}
				let option = {
					yAxis: {
						max: 700,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#A0A0A0'
							}
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						name: '水位(m)',
						axisTick: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						type: 'value',
						nameTextStyle: {
							color: '#A0A0A0'
						}
					},
					xAxis: {
						axisLabel: {
							show: true,
							showMaxLabel: true,
							textStyle: {
								color: '#A0A0A0'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						data: ['03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '01', '02'],
						axisLine: {
							show: true,
							lineStyle: {
								color: '#A0A0A0',
								width: 1
							}
						},
						// name: "日期",
						axisTick: {
							show: false
						},
						type: 'category',
						nameTextStyle: {
							color: '#A0A0A0'
						}
					},
					legend: {
						data: ['流量', '水位', '警戒线', '保证线'],
						bottom: '0'
					},
					series: [
						{
							name: '保证线',
							data: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
							symbol: 'none',
							itemStyle: {
								normal: {
									lineStyle: {
										width: 2,
										color: '#FF0000'
									}
								}
							},
							type: 'line',
							smooth: true
						},
						{
							name: '警戒线',
							data: [106, 106, 106, 106, 106, 106, 106, 106, 106, 106, 106, 106],
							symbol: 'none',
							itemStyle: {
								normal: {
									lineStyle: {
										width: 2,
										color: '#FFC700'
									}
								}
							},
							type: 'line',
							smooth: true
						},
						{
							name: '水位',
							data: [200, 206, 250, 300, 260, 240, 300, 400, 240, 230, 150, 300],
							symbol: 'none',
							itemStyle: {
								normal: {
									lineStyle: {
										width: 2,
										color: '#0085FF'
									}
								}
							},
							type: 'line',
							smooth: true
						},
						{
							name: '流量',
							data: [
								200 + 22,
								206 + 22,
								250 + 22,
								300 + 22,
								260 + 22,
								240 + 22,
								300 + 22,
								400 + 22,
								240 + 22,
								230 + 22,
								150 + 22,
								300
							],
							symbol: 'none',
							itemStyle: {
								normal: {
									lineStyle: {
										width: 2,
										color: '#FFC700'
									}
								}
							},

							type: 'line',
							smooth: true
						}
					],
					tooltip: {
						trigger: 'axis'
						// position: (point, params, dom, rect, size) => {
						// 	let left = point[0]
						// 	if (left < 100) {
						// 	} else {
						// 		left = left - 100
						// 	}
						// 	return [left, point[1]]
						// }

						// confine: true
						// formatter: ' {a} {b} {c}m'
					},
					grid: {
						top: '15%',
						left: '10%',
						bottom: '24%',
						right: '2%'
					}
				}
				this.option = option
			}
		},
		computed: {},
		mounted() {
			this.init()
		}
	}
</script>
<style lang="less" scoped></style>
